<template>
	<view class="order">
		<!-- 判断商家自提还是默认配送 -->
		<view class="order-type" v-if="params.type != 2 && seller.state">
			<text @tap="addIndex = 1" :class="addIndex == 1 ? 'active' : ''">物流配送</text>
			<text @tap="addIndex = 2" :class="addIndex == 2 ? 'active' : ''">到店自取</text>
		</view>
		<!-- 收货地址 -->
		<con-address :address="address" @editadress="editadress" :addType="addIndex" :seller="seller" :user="order.user"></con-address>
		<!-- 拼团规则 -->
		<view class="order-tour" v-if="params.type == 3">
			<view class="tour-img">
				<image :src="Url+'add_images/groups_02.png'" mode="widthFix"></image>
				<text> 01-选择商品</text>
			</view>
			<view class="tour-img1">
				<image :src="Url+'add_images/groups_01.png'" mode="widthFix"></image>
			</view>
			<view class="tour-img">
				<image :src="Url+'add_images/groups_03.png'" mode="widthFix"></image>
				<text> 02-邀请好友</text>
			</view>
			<view class="tour-img1">
				<image :src="Url+'add_images/groups_01.png'" mode="widthFix"></image>
			</view>
			<view class="tour-img">
				<image :src="Url+'add_images/groups_04.png'" mode="widthFix"></image>
				<text> 03-人满成团</text>
			</view>
		</view>
		<!-- 商品列表 -->
		<view class="order_product box">
			<product :numShow="false" :descShow="false" :titleLineheight="false" :productList="productList" :type="params.type"></product>
		</view>
		<view class="price_info">
			<view class="price_info_item">
				<view class="price_info_title">商品金额</view>
				<view class="price_info_price" v-if="params.type != 2">￥{{order.money}}</view>
				<view class="price_info_price" v-else>{{order.money}}积分</view>
			</view>
			<view class="price_info_item" style="border-bottom:2upx solid #F9F9F9;" @tap="choosediscount" v-if="params.type == 1 && couponList.length">
				<view class="price_info_title price_info_conpun">优惠券<text v-if="couponList.length">{{couponList.length}}张可用</text></view>
				<view class="price_info_price price_info_price_r"><text v-if="couponPrice.couponPrice">-￥{{couponPrice.couponPrice}}</text> <i style="margin-left: 10upx;" class="icon">&#xe637;</i></view>
			</view>
			<view class="price_info_item" v-if="params.type != 2 && addIndex == 1">
				<view class="price_info_title">配送费</view>
				<view class="price_info_price" v-if="postage" style="color: #FF2842;">+￥{{postage}}</view>
				<view class="price_info_price" v-else>免运费</view>
			</view>
			<view class="price_info_item">
				<view class="price_info_title">订单备注</view>
				<!-- #ifdef H5 -->
				<view class="price_info_price">
					<input v-model="memo" :focus="memofocus" @blur="memoblur" placeholder="选填,请先和商家协商一致" placeholder-class="place"/>
				</view>
				<!-- #endif -->
				<!-- #ifdef MP-WEIXIN -->
				<view class="price_info_price">
					<text class="text" :style="{color:memo ? '#333333' : '#eaeaea'}" v-if="memohide" @tap="memoTap">{{memo ? memo : '选填,请先和商家协商一致'}}</text>
					<input v-else v-model="memo" :focus="memofocus" @blur="memoblur" placeholder="选填,请先和商家协商一致" placeholder-class="place"/>
				</view>
				<!-- #endif -->
			</view>
			<view class="price_info_din">
				<text>共{{productList.length}}件</text><text>合计： </text><text class="price" v-if="params.type != 2">{{allPrice}}</text><text v-else>{{allPrice}}积分</text>
			</view>
		</view>
		<view class="order_submit">
			<view class="order_submit_btn">
				<view class="all">
					<text>共{{productList.length}}件</text> 合计： <text class="price" v-if="params.type != 2">{{allPrice}}</text><text v-else>{{allPrice}}积分</text>
				</view>
				<view class="order_submit_btn_submit" @tap="submit">
					提交订单
				</view>
			</view>
		</view>
		<uni-coupon :drawFlag="drawFlag" @close="closeDrawer" :hideHeight="hideHeight" :couponList="couponList" @Tips="Tips" @select="select" @draw="coupondraw"></uni-coupon>
		<view style="height:60%;" class="hide"></view>
		<shop-loading v-if="shopLoad"></shop-loading>
	</view>
</template>

<script>
	import product from '@/components/classify/product.vue'
	import uniPopup from '@/components/uni-popup/uni-popup.vue'
	import uniCoupon from '@/components/uni-drawer/uni-coupon.vue';
	import conAddress from '../components/con-address.vue';
	import { orderSubmit,getPostage,userCoupon,addOrder,tourorderSubmit,integralOrder,AgetPostage,AaddOrder,integralOrderAdd} from '@/common/index.js';
	import {debounce} from '@/static/js/utils.js';
	export default {
		components:{ product, uniPopup,uniCoupon,conAddress},
		data () {
			return {
				drawFlag:false,
				Url:this.Imgurl,
				addIndex:1,
				productList: [],
				radioVal:'1',
				hideHeight:0,
				address:{},
				params:{}, //里面的type 1(正常商品)，0(秒杀商品),2(积分商品),3(拼团商品)
				order:{},
				couponList:[],
				totalPrice:0,
				seller:{},
				postage:0,
				memo:'',
				memohide:true,
				memofocus:false,
				shopLoad:true,
			}
		},
		watch:{
			address(newVal,oldVal){
				this.ordergetpostage()
			}
		},
		computed:{
			allPrice(){
				let {totalPrice,couponPrice,postage,addIndex} = this;
				let yunfei = addIndex == 1 ? postage : 0
				// console.log('优惠券',couponPrice.couponPrice)
				let price = (totalPrice - couponPrice.couponPrice) + yunfei;
				// console.log(postage)
				price = (+price.toFixed(2)) * 1
				return price;
			},
			couponPrice(){
				const {couponList} = this;
				let params = {
					couponPrice:0,
					couponId:''
				}
				couponList.map(item=>{
					if(item.check){
						// console.log(item.user_price)
						params.couponPrice = +item.user_price;
						params.couponId = item.id
					}
				})
				return params
			}
		},
		onLoad(ops){
			let data = JSON.parse(ops.data)
			// console.log(ops,data)
			this.params = {
				...data
			}
			// console.log(this.params)
			this.orderDetail()
		},
		mounted() {
			let that = this;
			let version = uni.getSystemInfoSync().version
			that.$nextTick(function(){
			   const query = uni.createSelectorQuery()
			   query.select('.hide').boundingClientRect(data => {
				this.hideHeight = data.height;
			   }).exec();
			})
		},
		methods: {
			memoblur(){
				this.memohide = true;
				this.memofocus = false;
			},
			memoTap(){
				this.memohide = false;
				this.memofocus = true;
			},
			//领取优惠券
			coupondraw:debounce(function(index,item){
				userCoupon({id:item.id}).then(res=>{
					if(res.code == 1){
						this.toast(res.msg)
						this.couponList[index]['use_state'] = 1;
					}else{
						this.toast(res.msg)
					}
				}).catch()
			},500),
			//优惠券说明
			Tips(index){
				this.couponList.forEach((item,ind)=>{
					if(ind == index){
						// let flag = !item.tipsShow
						item.tipsShow = !item.tipsShow
					}else{
						item.tipsShow = false
					}
				})
			},
			//选取优惠券
			select(index){
				this.couponList.forEach((item,ind)=>{
					if(ind == index){
						item.check = !item.check
						// this.priceCoupon()
					}else{
						item.check = false
					}
				})
			},
			//查看运费
			ordergetpostage(){
				const { params,address } = this;
				if(!address){
					return false;
				}
				let type = params.type;
				let data = {
					address_id:address.id,
					...params
				}
				switch(+type){
					case 0: case 1:
					    this.ligetPostage(data);  //普通与秒杀
						break;
					case 3:
					    this.AgetPostage(data); //拼团商品详情
						break;
				    default:''
					    break;
				}
			},
			//普通与秒杀运费
			ligetPostage(params){
				getPostage(params).then(res=>{
					if(res.code == 1){
						// console.log(res)
						this.postage = +res.msg.price;
					}else{
						this.toast(res.msg)
					}
				})
			},
			//拼团运费
			AgetPostage(params){
				AgetPostage(params).then(res=>{
					if(res.code == 1){
						// console.log(res)
						this.postage = +res.msg.price;
					}else{
						this.toast(res.msg)
					}
				}).catch()
			},
			//确认订单详情
			orderDetail(){
				const { params } = this;
				let type = params.type;
				switch(+type){
					case 0: case 1:
					    this.monOrderSubmit(params);  //普通与秒杀
						break;
					case 2:
					    this.interOrderSubmit(params); //积分商品详情
						break;
					case 3:
					    this.tourOrderSubmit(params); //拼团商品详情
						break;
				    default:''
					    break;
				}
			},
			//普通商品和秒杀商品详情
			monOrderSubmit(params){
				this.shopLoad = true;
				orderSubmit(params).then(res=>{
					if(res.code == 1){
						// console.log(res)
						const info = res.msg;
						this.order = info;
						this.address = info.address;
						let coupon = JSON.parse(JSON.stringify(res.msg.coupon));
						coupon.map(item => {
							item.check = false,
							item.tipsShow = false;
						})
						this.couponList = coupon;
						this.productList = info.goods;
						this.totalPrice = info.money;
						this.seller = info.seller;
						this.shopLoad = false;
					}else{
						this.toast(res.msg)
						this.shopLoad = false;
					}
				}).catch()
			},
			//积分商品详情
			interOrderSubmit(params){
				this.shopLoad = true;
				integralOrder(params).then(res=>{
					if(res.code == 1){
						// console.log(res)
						const info = res.msg;
						this.order = info;
						this.address = info.address;
						this.productList = info.goods;
						this.totalPrice = info.money;
						this.shopLoad = false;
					}else{
						this.toast(res.msg)
						this.shopLoad = false;
					}
				}).catch()
			},
			//拼团商品详情
			tourOrderSubmit(params){
				this.shopLoad = true;
				tourorderSubmit(params).then(res=>{
					if(res.code == 1){
						const info = res.msg;
						this.order = info;
						this.address = info.address;
						this.productList = info.goods;
						this.totalPrice = info.money;
						this.seller = info.seller;
						this.shopLoad = false;
					}else{
						this.shopLoad = false;
						this.toast(res.msg)
					}
				}).catch()
			},
			closeDrawer(){
				this.drawFlag = false
			},
			radioChange(type){
				this.radioVal = type;
			},
			// 编辑地址
			editadress () {
				uni.navigateTo({
					url: '/pageD/adress/adress'
				})
			},
			addadress () {
				uni.navigateTo({
					url: '/pageD/adress/addAdress'
				})
			},
			choosediscount () {
				if(this.couponList.length){
				   	this.drawFlag = true	
				}
				// uni.navigateTo({
				// 	url: '/pageB/order/orderdiscount'
				// })
			},
			submit:debounce(function(){
				const {params,memo,address,order,addIndex,couponPrice} = this;
				let type = params.type;
				if(!address && addIndex == 1){
					this.toast('请选择地址');
					return false;
				}
				let paramsCon = {
					...params,
					memo,
					address_id:addIndex == 1 ? address.id : '',
					mobile:type != 2 ? order.user.mobile : '',
					type:addIndex,
					coupon_id:couponPrice.couponId
				}
				switch(+type){
					case 0: case 1:
					    this.monaddOrder(paramsCon,type);
					    break;
					case 2:
					    this.interaddOrder(paramsCon,type);
						break;
					case 3:
					    this.touraddOrder(paramsCon,type);
						break;
					default:''
					    break;
				}
			},500),
			//普通添加订单
			monaddOrder(paramsCon,params){
				addOrder(paramsCon).then(res=>{
					if(res.code == 1){
						// let data = JSON.stringify(res.msg)
						if(res.msg.code == 1){
							uni.reLaunch({
								url: '/pageD/pay-Success/pay-Success?payType=1&type='+params
							});
							return false;
						}
						let line = {
							...res.msg,
							type:params
						}
						let data = JSON.stringify(line)
						uni.reLaunch({
							url:'/pageB/cashierDesk/cashierDesk?data='+data
						})
					}else{
						this.toast(res.msg)
					}
				}).catch()
			},
			//拼团添加订单
			touraddOrder(paramsCon,params){
				AaddOrder(paramsCon).then(res=>{
					if(res.code == 1){
						if(res.msg.code == 1){
							uni.reLaunch({
								url: '/pageB/groupTuxedo/groupTuxedo?id='+res.msg.user_assemble_id+'&type='+params
							});
							return false;
						}
						let line = {
							...res.msg,
							type:params
						}
						let data = JSON.stringify(line)
						uni.reLaunch({
							url:'/pageB/cashierDesk/cashierDesk?data='+data
						})
					}else{
						this.toast(res.msg)
					}
				})
			},
			//积分添加订单
			interaddOrder(paramsCon,params){
				integralOrderAdd(paramsCon).then(res=>{
					if(res.code == 1){
						if(res.msg.code == 1){
							uni.reLaunch({
								url: '/pageD/pay-Success/pay-Success?payType=1&type='+params
							});
							return false;
						}
						let line = {
							...res.msg,
							type:params
						}
						let data = JSON.stringify(line)
						uni.reLaunch({
							url:'/pageB/cashierDesk/cashierDesk?data='+data
						})
					}else{
						this.toast(res.msg)
					}
				}).catch()
			},
			tohomepage () {
				uni.switchTab({
					url: '/pages/index/index'
				})
			},
			toorder () {
				uni.navigateTo({
					url: '../../pageD/order/order'
				})
			}
		}
	}
</script>

<style>
	.hide{
		position: absolute;
		width: 100%;
		z-index:-1;
		background-color:red;
		top: -55%;
		left: -100%;
	}
</style>
<style lang="scss" scoped>
	.order-type{
		width: 100%;
		display: flex;
		align-items: center;
		justify-content:space-around;
		padding:40upx 0;
		background-color: #FFFFFF;
		font-size: 32upx;
		text{
			&::after{
				content: "";
				display: block;
				width: 100%;
				height:12upx;
				border-radius: 12upx;
				background-color:#FFFFFF;
				margin-top: -12upx;
			}
		}
		.active{
			color: #FF2842;
			&::after{
				content: "";
				display: block;
				background-color: rgba(255,40,66,0.2);
			}
		}
	}
	.order-tour{
		width: calc( 100% - 30upx);
		background-color: #FFFFFF;
		margin:20upx auto;
		border-radius: 10upx;
		padding: 40upx 0;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: center;
		.tour-img{
			image{
				width: 48upx;
				height: 48upx;
				display: block;
				margin: 0 auto;
			}
			text{
				display: block;
				text-align: center;
				font-size: 22upx;
				color: #333333;
				margin-top: 20upx;
			}
		}
		.tour-img1{
			margin: 0 20upx;
			align-self:flex-start;
			image{
				width: 53upx;
				height: 20upx;
			}
		}
	}
	.payType{
		width: calc( 100% - 30upx);
		background-color: #FFFFFF;
		margin:0 auto;
		border-radius: 10upx;
		.payType-xia{
			height: 2upx;
			width: 90%;
			background-color: #f9f9f9;
			display: block;
			margin: 0 auto;
		}
		.payType-list{
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding: 26upx;
			box-sizing: border-box;
			.payType-text{
				font-size: 28upx;
				color: #333333;
				display: flex;
				align-items: flex-end;
				image{
					width: 36upx;
					height: 36upx;
					margin-right: 10upx;
				}
				text{
					font-size: 20upx;
					color: #999999;
				}
			}
			/deep/{
			  uni-radio .uni-radio-input {
			      -webkit-appearance: none;
			      appearance: none;
			      margin-right: 5px;
			      outline: 0;
			      border: 1px solid #d1d1d1;
			      background-color: #fff;
			      border-radius: 50%;
			      width:36upx;
			      height:36upx;
			      position: relative;
			  }	
			}
		}
	}
	.box {
		width: calc( 100% - 30upx);
		background-color: #FFFFFF;border-radius: 10upx;
		margin: auto;
	}
	.icon{
		color: #999999;
		font-size: 28upx;
	}
	.order {
		overflow: hidden;
		padding-bottom: 180upx;
		box-sizing: border-box;
	}
	.address {
		width: calc(100% - 30upx);
		margin: 20upx auto;
		background-color: #FFFFFF;
		border-radius: 10upx;
		padding:26upx 15upx 26upx 25upx;
		box-sizing: border-box;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.address-right{
			flex: 1;
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 28upx;
			padding-left: 20upx;
		}
		.address_icon {
			width: 64upx;
			height: 64upx;
			image {
				width: 100%;
				height: 100%;
			}
		}
		.adress_info {
			width: 100%;
			    display: flex;
			    align-items: center;
			    justify-content: space-between;
			.adress_info_name {
				font-size: 28upx;
				line-height: 28upx;
				color: #333333;
				margin-bottom: 28upx;
				text {
					font-size: 24upx;
					color: #333333;
				}
			}
			.adress_info_detail {
				font-size: 28upx;
				line-height: 28upx;
				color: #333333;
				position: relative;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				.icon {
					position: absolute;
					font-size: 28upx;
					color: #999999;
					right: 0;
					top: 0;
				}
			}
		}
	}
	.noadress {
		height: 90upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin: 20upx auto;
		padding: 0 15upx 0 25upx;
		box-sizing: border-box;
		.noadress_left {
			display: flex;
			align-items: center;
			image {
				width: 64upx;
				height: 64upx;
				margin-right: 20upx;
			}
			.noadress_left_title {
				font-size: 28upx;
				color: #333333;
			}
		}
		.jticon {
			font-size: 28upx;
			color: #999999;
		}
	}
	.discount {
		width: 100%;
		padding: 0 15upx;
		box-sizing: border-box;
		display: flex;
		justify-content: space-between;
		.discount_num {
			font-size: 28upx;
			color: #333333;
			display: flex;
			align-items: center;
			line-height: 32upx;
			.usenum {
				height: 32upx;
				padding: 0 10upx;
				font-size: 24upx;
				color: #FFFFFF;
				line-height: 32upx;
				background-color: #f73e2f;
				margin-left: 10upx;
			}
		}
		.discount_price {
			width: 480upx;
			padding: 30upx 0;
			box-sizing: border-box;
			border-top: 2upx solid #E1E1E1;
			text-align: right;
			font-size: 28upx;
			color: #f73e2f;
			.icon {
				font-size: 28upx;
				color: #999999;
				margin-left: 10upx;
			}
		}
	}
	.order_product {
		overflow: hidden;
		
	}
	.deduction {
		display: flex;
		align-items: center;
		justify-content: space-between;
		width: calc(100% - 30upx);
		height: 100upx;
		background-color: #FFFFFF;
		margin: auto;
		margin-top: 20upx;
		border-radius: 10upx;
		padding: 0 15upx;
		box-sizing: border-box;
		line-height: 28upx;
		.deduction_title {
			font-size: 28upx;
			color: #333333;
			text {
				font-weight: bold;
				color: #f73e2f;
				margin-left: 10upx;
			}
		}
		.onoff {
			transform: scale(0.5);
			margin-right: -26upx;
		}
	}
	.logistics_remark {
		margin-top: 20upx;
		padding: 0 15upx;
		box-sizing: border-box;
		overflow: hidden;
		.logistics {
			height: 110upx;
			width: 100%;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2upx solid #E1E1E1;
			.logistics_title {
				font-size: 28upx;
				color: #333333;
			}
			.logistics_price {
				font-size: 28upx;
				color: #333333;
			}
		}
		.remark {
			display: flex;
			margin: 20upx 0;
			.remark_title {
				width: 140upx;
				font-size: 28upx;
				color: #333333;
			}
			textarea {
				flex: 1;
				height: 120upx;
				font-size: 28upx;
				line-height: 40upx;
				color: #333333;
			}
		}
	}
	.order_price {
		display: flex;
		justify-content: flex-end;
		align-items: flex-end;
		margin-bottom: 10upx;
		.order_price_num {
			font-size: 24upx;
			color: #999999;
		}
		.order_price_all {
			font-size: 28upx;
			color: #333333;
			margin-left: 10upx;
		}
		.order_price_price {
			font-size: 28upx;
			color: #f73e2f;
		}
	}
	.order_pay {
		margin-top: 20upx;
		padding: 0 15upx;
		box-sizing: border-box;
		height: 100upx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		.order_pay_title {
			font-size: 28upx;
			color: #333333;
		}
		.order_pay_wechat {
			font-size: 28upx;
			color: #f73e2f;
		}
	}
	.order_submit {
		position: fixed;
		bottom: var(--window-bottom);
		width: 100%;
		height:100upx;
		.order_submit_btn {
			width: 100%;
			height: 100%;
			overflow: hidden;
			display: flex;
			background-color: #333333;
			.all {
				width:70%;
				font-size: 28upx;
				color: #FFFFFF;
				// display: flex;
				// align-items: center;
				// justify-content: flex-end;
				// padding-right: 30upx;
				box-sizing: border-box;
				padding: 34upx 30upx;
				text-align: right;
				text{
					&:first-child{
						font-size: 22upx;
						margin-right: 20upx;
					}
					&.price{
						&::before{
							content: "￥";
							font-size: 22upx;
						}
					}
				}
			}
		}
		
		.order_submit_btn_price {
			width: 540upx;
			height: 100%;
			background-color: #333333;
			display: flex;
			flex-direction: column;
			justify-content: center;
			padding-left: 30upx;
			box-sizing: border-box;
			
			.privilege {
				margin-top: 4upx;
				display: flex;
				align-items: center;
				line-height: 32upx;
				font-size: 24upx;
				color: #f73e2f;
				image {
					width: 29upx;
					height: 26upx;
				}
			}
		}
		.order_submit_btn_submit {
			width: 30%;
			height: 100%;
			font-size: 28upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 100upx;
			background:linear-gradient(90deg,rgba(255,40,66,1),rgba(255,94,113,1));
		}
	}
	.pay_success {
		width: 510upx;
		height: 528upx;
		background-color: #FFFFFF;
		border-radius: 20upx;
		padding-top: 200upx;
		box-sizing: border-box;
		position: relative;
		.success_pic {
			width: 722upx;
			height: 507upx;
			position: absolute;
			left: 50%;
			top: -40%;
			transform: translate(-50%);
		}
		.tips {
			font-size: 28upx;
			color: #333333;
			font-weight: bold;
			text-align: center;
		}
		.pay_btn {
			width: 340upx;
			height: 80upx;
			font-size: 32upx;
			color: #FFFFFF;
			text-align: center;
			line-height: 80upx;
			border-radius: 10upx;
			margin: auto;
		}
		.return_homepage {
			background: linear-gradient(to right,#f73e2f 0%,#FF2842 100%);
			box-shadow: 0 0 6upx 0 #FF2842;
			margin-top: 50upx;
		}
		.look_order {
			background: linear-gradient(to right,#999999 0%,#e1e1e1 100%);
			box-shadow: 0 0 6upx 0 #e1e1e1;
			margin-top: 30upx;
		}
	}
	.price_info {
		width: calc(100% - 30upx);
		margin: auto;
		margin-top: 20upx;
		border-radius: 10upx;
		background-color: #FFFFFF;
		padding:20upx 26upx;
		box-sizing: border-box;
		.price_info_item {
			display: flex;
			align-items: center;
			justify-content: space-between;
			padding-bottom: 10px;
			.price_info_title {
				font-size: 28upx;
				color: #333333;
				line-height: 60upx;
			}
			.price_info_conpun{
				position: relative;
				text{
					min-width: 120upx;
					position: absolute;
					box-sizing: border-box;
					text-align: center;
					font-size: 24upx;
					background-color: #FF2842;
					color: #FFFFFF;
					height:40upx;
					line-height:40upx;
					top:18%;
					left: 116%;
				}
			}
			.price_info_price {
				font-size: 28upx;
				color: #333333;
				line-height: 60upx;
				input{
					min-width: 300upx;
				}
				.text{
					display: block;
					max-width: 380upx;
					min-width: 300upx;
					overflow:hidden;
					text-overflow:ellipsis;
					white-space:nowrap;
					font-size: 28upx;
				}
				.place{
					font-size: 28upx;
					color:#eaeaea;
				}
			}
			.price_info_price_r {
				color: #f73e2f;
			}
		}
		.price_info_din{
			// display: flex;
			// justify-content: flex-end;
			// align-items: flex-end;
			    padding: 8px 0;
			    text-align: right;
			font-size: 22upx;
			color: #333333;
			text{
				&:first-child{
					font-size: 20upx;
					color: #666666;
					margin-right: 10upx;
				}
				&:last-child{
					font-size: 30upx;
					color: #FF2842;
					font-weight: bold;
				}
				&.price{
					&::before{
						content:'￥';
						font-size:22upx;
					}
				}
			}
		}
	}
</style>
